<template>
	<view>
		<view class="top">

		</view>
		
		<view class="bottom">
			<view class="content">
				<view class="form-container">
					<view class="form-item">
						<view class="label">标题：</view>
						<view class="input-wrapper">
							<uni-easyinput v-model="titleValue" placeholder="请输入内容"></uni-easyinput>
						</view>
					</view>
					
					<view class="form-item">
						<view class="label">内容：</view>
						<view class="input-wrapper">
							<uni-easyinput type="textarea" autoHeight v-model="contentValue" placeholder="请输入内容"></uni-easyinput>
						</view>
					</view>
					
					<view class="form-item">
						<view class="label">图片：</view>
						<view class="input-wrapper">
							<view class="file-picker-wrapper">
								<uni-file-picker limit="9" title="最多选择9张图片"></uni-file-picker>
							</view>
						</view>
					</view>
				</view>
				
				<view class="publish-button-container">
					<button class="publish-button">发布</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleValue: '',
				contentValue: '',
			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	.top{
		height: 25vh;
		background-color: #1f73f1;
	}
	.bottom{
		padding: 20rpx;
		min-height: 75vh;
		background-color: #f8f8f8;
	}
	
	.form-container {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 80rpx 30rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
	}
	
	.form-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 30rpx;
	}
	
	.form-item:last-child {
		margin-bottom: 0;
	}
	
	.label {
		font-size: 32rpx;
		color: #333333;
		min-width: 120rpx;
		flex-shrink: 0;
		margin-top: 12rpx;
	}
	
	.input-wrapper {
		flex: 1;
		margin-left: 20rpx;
	}
	
	.file-picker-wrapper {
		margin-top: -10rpx;
	}
	
	.publish-button-container {
		padding: 0 20rpx 40rpx 20rpx;
	}
	
	.publish-button {
		width: 100%;
		background-color: #4285f4;
		color: #ffffff;
		border: none;
		border-radius: 50rpx;
		padding: 16rpx 0;
		font-size: 30rpx;
		font-weight: 600;
		box-shadow: 0 4rpx 12rpx rgba(66, 133, 244, 0.3);
		transition: all 0.3s ease;
	}
	
	.publish-button:active {
		background-color: #3367d6;
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(66, 133, 244, 0.4);
	}
	
	/* 输入框样式优化 */
	.form-item :deep(.uni-easyinput__content) {
		border: 2rpx solid #e0e0e0;
		border-radius: 8rpx;
		background-color: #fafafa;
	}
	
	.form-item :deep(.uni-easyinput__content-input) {
		padding: 20rpx;
		font-size: 28rpx;
	}
	
	.form-item :deep(.uni-easyinput__content-textarea) {
		padding: 20rpx;
		font-size: 28rpx;
		min-height: 200rpx;
	}
	.content{
		transform: translateY(-350rpx);
	}
</style>
